<template>
	<s-layout title="搜索" :bgStyle="{
		color:'#F6F6F6'
	}">
	<view class="search-box ss-flex justify-between align-center ss-p-x-20">
		<view class="search ss-flex ss-p-x-30">
			<uni-icons type="search" size="20" color="#9A9A9A"></uni-icons>
			<input class="ss-m-l-20" v-model="state.keyword" type="text" placeholder="请输入搜索内容" confirm-type="search"
				@confirm="confirm" />
		</view>
		<view @click="change">{{state.search ? '取消' : '搜索'}}</view>
	</view>
	<view v-if="state.list.length >= 1">
		<view class="search-result" v-for="(item,index) in state.list" :key="index">
			<view class="ss-p-x-20 ss-p-t-20 ss-m-b-12" v-if="item.list.length >= 1">
				<view class="ss-flex justify-between align-center">
					<view class="result-title">
						{{item.title}}
					</view>
					<view class="result-more ss-flex align-center justify-between" @click="more(item.type)">
						<view>更多</view>
						<uni-icons type="right" size="18"></uni-icons>
					</view>
				</view>
				<view class="result-child-item ss-flex align-center justify-start"
					:class="[p !== item.list.length - 1 ? 'bb' : '']" v-for="(v,p) in item.list" :key="p" @click="jump(item.type,v)">
					<template v-if="item.type === 'group'">
						<image class="result-child-item-image ss-m-r-24"
							:src="cdn(v.FaceUrl) || 'https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/20231117163016c941b7397.png'" mode="aspectFill"></image>
						<view class="result-child-item-text">{{v.Name}}</view>
					</template>
					<template v-else>
						<image class="result-child-item-image ss-m-r-24"
							:src="cdn(v.last_msg.Tag_Profile_IM_Image)" mode="aspectFill"></image>
						<view class="result-child-item-text">{{v.last_msg.Tag_Profile_IM_Nick}}</view>
					</template>
				</view>
			</view>
		</view>
	</view>
	<uni-load-more v-if="state.message_Request === true" status="loading" :content-text="{
	        contentdown: '上拉加载更多',
	      }" />
	<s-empty v-if="state.list.length === 0 && state.message_Request === false"
		icon="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/vocal/data-empty.png" text="暂无数据">
	</s-empty>
	</s-layout>
</template>

<script setup>
	import {
		reactive,
		computed
	} from 'vue';
	import sheep from '@/sheep';
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {cdn,udid} from '@/im/config/index.js'
	import $store from '@/im/store/im';

	const iMMyInfo = computed(() => $store().userInfo);

	const state = reactive({
		keyword: '',
		list: [],
		message_Request: true,
		search: true
	})

	onLoad((options) => {
		if (options) {
			state.keyword = options.keyword
			getData()
		}
	})
	
	const more = (type) => {
		sheep.$router.go('/im/pages/result',{
			type:type,
			search:state.keyword
		})
	}
	
	const jump = (type,value) => {
		if (type === 'recently' || type === 'contacts') {
			$store().getChatInfo(`C2C${value.account}`, 'chat', value.account)
		} else {
			$store().getChatInfo(`GROUP${value.GroupId}`, 'group', value.GroupId)
		}
	}

	const confirm = () => {
		if (state.keyword.length < 1) {
			return uni.showToast({
				title: '请输入搜索内容',
				icon: 'none',
				duration: 1500
			})
		}
		state.search = true
		state.message_Request = true
		state.list = []
		getData()
	}

	const change = () => {
		state.search = !state.search

		if (state.search) {
			if (state.keyword.length < 1) {
				state.search = false
				return uni.showToast({
					title: '请输入搜索内容',
					icon: 'none',
					duration: 1500
				})
			}
			state.list = []
			state.message_Request = true
			getData()
		} else {
			state.list = []
			state.keyword = ''
		}
	}

	const getData = () => {
		uni.request({
			url: 'https://im-beta.shisan-xi.work/api/settings/searchList',
			method: 'GET',
			data: {
				keyword: state.keyword,
				im_id: iMMyInfo.value.userID
			},
			success(result) {
				if (result.data.data.recently.length !== 0 || result.data.data.contacts.length !== 0 || result.data.data.group.length !== 0) {
					let obj = {
						'recently': '最近联系的人',
						'contacts': '联系人',
						'group': '群聊'
					}
					for (let name in result.data.data) {
						state.list.push({
							type:name,
							title: obj[name],
							list: result.data.data[name]
						})
					}
				}
				state.message_Request = false
			}
		});
	}
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}

	.search-box {
		width: 100%;
		height: 88rpx;
		background-color: #fff;

		.search {
			width: 624rpx;
			height: 72rpx;
			background: #F1F1F1;
			border-radius: 8rpx;

			input {
				flex: 1;
				width: 100%;
				height: 72rpx;
				line-height: 72rpx;
				font-weight: 350;
				font-size: 28rpx;
				color: #000000;
			}
		}
	}

	.search-result {
		width: 100%;
		background-color: #fff;

		.result-title {
			font-weight: 350;
			font-size: 24rpx;
			color: #939393;
		}

		.result-more {
			font-weight: 350;
			font-size: 24rpx;
			color: #3D3D3D;
		}

		.result-child-item {
			width: 100%;
			height: 104rpx;

			.result-child-item-image {
				width: 72rpx;
				height: 72rpx;
				border-radius: 10rpx;
			}

			.result-child-item-text {
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
		}
	}

	.bb {
		border-bottom: 1rpx solid #EDEDED;
	}
</style>